<template>
	<el-drawer v-model="visible" title="新增流水线"  size="100%">

		<el-tabs v-model="activeName" class="demo-tabs">
			
			<el-tab-pane label="基本信息" name="baseInfo">
				<pipelineBaseInfo :basePipelineInfo="pipelineInfo" ref="basePipelineInfoRef"></pipelineBaseInfo>
			</el-tab-pane>

			<el-tab-pane label="任务编排" name="moduleInfo">
				<pipelineModule :moduleInfoList="moduleListRef" ref="moduleRef"></pipelineModule>
			</el-tab-pane>

  		</el-tabs>

		<template #footer>
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" @click="submitHandle()">保存</el-button>
		</template>
	</el-drawer>

</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage} from 'element-plus/es'
import uri from '@/api/uri'
import { getRequest,postReq } from '@/utils/request'
import type { TabsPaneContext,TabPaneName } from 'element-plus'
import pipelineBaseInfo from './pipeline-base-info.vue'
import pipelineModule from './pipeline-module.vue'

const emit = defineEmits(['refreshDataList'])

interface ModuleInfo{
    moduleType:string,
    moduleName:string,
    moduleContent:string,
    moduleExecClassName:string,
    isSelect:boolean
}

const visible = ref(false)

//模块
const moduleListRef:any = ref([])
const moduleRef = ref()

//基本信息
const pipelineInfo = ref({
	formData:{isValid:false}
})
const basePipelineInfoRef = ref();

const activeName = ref('baseInfo')
const init = (id?: number) => {
	moduleListRef.value = []
	const module:ModuleInfo = {
        moduleType:'',
        moduleName:'新任务',
        moduleContent:'',
        moduleExecClassName:'',
        isSelect:false
    }
	
	moduleListRef.value.push(module)
	visible.value = true
}


// 表单提交
const submitHandle = async () => {
	
	let baseInfoValid = await basePipelineInfoRef.value.validData()
	if(!baseInfoValid){
		ElMessage.error("请完善流水线基本信息")
		return
	}

	let moduleVaild = await moduleRef.value.validData()
	const moduleVaildFlag = moduleVaild.find((item:any) => item === false);  
	if(moduleVaildFlag===false){
		ElMessage.error("请完善流水线模块信息")
		return
	}
	
	const params = {pipelineInfo:JSON.stringify(pipelineInfo.value.formData),
		moduleListContent:JSON.stringify(moduleListRef.value)}

	postReq(uri.addPipelineInfo,params).then(() => {
			ElMessage.success({
			message: '操作成功',
			duration: 500,
			onClose: () => {
				visible.value = false
				emit('refreshDataList')
			}
			})	
	})
	
	/** 

	dataFormRef.value.validate((valid: boolean) => {
		if (!valid) {
			return false
		}
		let url = uri.addPipelineInfo
		if(dataForm.id){
			url =  uri.updatePipelineInfo
		}

		let selectKey = selectModuleRef.value.map((item:any) => {
			return item.value
		})
		dataForm.selectModuleList = selectKey
		dataForm.selectModuleLabelValList = []
		

	})
*/


}



defineExpose({
	init
})
</script>

<style>
.border-with-icon {  
  position: relative;  
  display: inline-block;  
}  
  
.border {  
  border: 1px solid #ccc;  
  width: 100px;  
  height: 100px;  
  display: inline-block;  
}  

.icon {  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
}  
.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.custom-card {  
  border: 1px solid #FFFFFF; /* 默认边框颜色 */  
  transition: border-color 0.3s ease; /* 添加过渡效果 */  
  cursor: pointer;
}  

.custom-card:hover {  
  border-color: #409EFF; /* 鼠标悬停时的边框颜色 */  
}  
</style>
